<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="date"
                            label="日期"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        tableData: [{
                            date: '2016-05-02',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄',
                        }, {
                            date: '2016-05-04',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }, {
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄',
                        }, {
                            date: '2016-05-03',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>